<template>
  <div :class="`${prefixCls}`">
    <BasicForm @register="registerForm" @submit="handleSubmit" :class="`${prefixCls}-form`"> 
      <template #formFooter>
        <a-button :class="prefixCls + '-form-submit'" @click="handleSubmit" type="primary" :loading="loading" style="margin-right: 0.9rem">确定</a-button>
      </template>
    </BasicForm>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { VerifyModal }  from '/@/components/BizVerify';
import { BasicForm, FormSchema } from '/@/components/Form/index';
import { useConfigForm, ConfigFormProps } from '/@/views/system/configCenter/hooks/useConfigForm'
import { ConfigKey } from '/@/views/system/config/config.model';
import { useModal } from '/@/components/Modal';
import { useDesign } from '/@/hooks/web/useDesign';
import { UploadBizType } from '/@/enums/uploadEnum';
import { BizType } from '/@/api/sys/model/msgPushModel';
const emit = defineEmits(['query-success'])

const { prefixCls } = useDesign('channel-wx-mp')
const [registerVerifyModal, { openModal: openVerifyModal }] = useModal();

const formSchema: FormSchema[] = [
  {
    field: 'baseDivider',
    label: "公众号信息",
    component: "Divider"
  },
  {
    field: 'name',
    label: '公众号名称',
    component: 'Input',
    required: true
  },
  {
    field: 'accountId',
    label: '公众号ID',
    component: 'Input',
    required: true
  },
  {
    label: '公众号二维码',
    field: 'qrCodeUrl',
    component: 'MyImageUpload',
    componentProps: {
      fileMax:1,
      bizType: UploadBizType.GENERAL_IMAGE
    },
  },

  {
    field: 'mpDevDivider',
    label: "公众号开发信息",
    component: "Divider"
  },
  {
    field: 'appId',
    label: '应用ID',
    required: true,
    helpMessage: [
      '开发者ID是公众号开发识别码，配合开发者密码可调用公众号的接口能力。',
      '登录微信公众平台，设置与开发 - 基本配置 - 公众号开发信息，记录开发者ID(AppID)',
    ],
    component: 'Input',
  },
  {
    label: '应用密钥',
    field: 'appSecret',
    required: true,
    helpMessage: [
      '开发者密码是校验公众号开发者身份的密码，具有极高的安全性',
      '登录微信公众平台，设置与开发 - 基本配置 - 公众号开发信息，设置开发者密码(AppSecret)',
    ],
    component: 'Input'
  },

  {
    field: 'msgPushDivider',
    label: "消息推送配置",
    component: "Divider"
  },
  {
    field: 'msgPushUrl',
    label: 'URL',
    dynamicDisabled: true,
    helpMessage: [ '指定当前后端服务接口用于接收微信推送的消息'],
    component: 'Input',
  },
  {
    label: 'Token',
    field: 'token',
    required: true,
    helpMessage: [ '必须为英文或数字' ],
    rules: [
      { required: true, message: 'Token不能为空' },
      { min: 5, max: 32, message: '长度在 5 到 32 个字符', trigger: 'blur' },
    ],
    component: 'Input'
  },

  {
    label: 'encodingAesKey',
    field: 'encodingAesKey',
    rules: [
      { required: true, message: 'EncodingAESKey不能为空' },
      { min: 1, max: 43, message: '长度在 1 到 43 个字符', trigger: 'blur' },
    ],
    helpMessage: [ '消息加密密钥由43位字符组成，可随机修改，字符范围为A-Z，a-z，0-9。' ],
    component: 'Input'
  },
  {
    field: 'functionDivider',
    label: "功能设置",
    helpMessage: [ 
      '在微信公众平台中，点击 设置与开发>公众号设置>功能设置，设置业务域名, 网页授权域名',
      "<a target='_blank' href='https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index'>测试公众号</a>"
    ],
    component: "Divider"
  },
  {
    field: 'bizDomain',
    label: '业务域名',
    component: 'Input',
  },
  {
    field: 'jsDomain',
    label: 'JS接口安全域名',
    component: 'Input',
  },
  {
    field: 'authReturnUrl',
    label: '授权回调地址',
    helpMessage: [ 
      '公众号平台配置的授权域名, 只需要填写域名即可(不需要携带http(s))',
      '比如 www.lingyangwl.cn'
    ],
    component: 'Input',
  },
];




const configFromProps : ConfigFormProps = {
  configKey: ConfigKey.WX_MP,
  schemas: formSchema,
  labelWidth: 140
}
const { registerForm, handleSubmit, loading } = useConfigForm(configFromProps, emit)

</script>


<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-channel-wx-mp';
.@{prefix-cls}-form {
  width: 700px;
  &-submit {
    margin-left: 140px;
  }
}

</style>../useConfigForm